<script lang="ts" setup>
import { Button, Modal } from 'ant-design-vue'
import { ref } from 'vue'

// 使用 ref 创建响应式变量，初始值为 false 表示模态框隐藏
const modalVisible = ref(false)

// 显示模态框的方法，将 modalVisible 设置为 true
const showModal = () => {
    modalVisible.value = true
}

// 隐藏模态框的方法，将 modalVisible 设置为 false
const hideModal = () => {
    modalVisible.value = false
}
</script>

<template>
    <div>
        <Button @click="showModal">选择</Button>
        <Modal
            :visible="modalVisible"
            title="商品列表"
            @cancel="hideModal"
            @ok="hideModal"
            width="1200px"
        >
            <PageContent type="select" />
            <template #footer>
                <Button @click="hideModal">取消</Button>
                <Button type="primary" @click="hideModal">确定</Button>
            </template>
        </Modal>
    </div>
</template>
